<!-- 首页 -->
<template>
	<view>
		<view class="msg-list">
			<view v-for="(item, index) in dataList" :key="index" class="msg-item" @click="chat(item)">
				<u-avatar :src="item.applyAvatar"></u-avatar>
				<view class="msg-right">
					<view class="user-info">
						<view class="nickname">{{item.applyNickName}}</view>
						<view class="time">{{item.createTime}}</view>
					</view>
					<view class="msg-box">
						<view class="text">{{item.message}}</view>
						<view v-if="item.unRead == 1" class="read-status">已读</view>
						<view v-else class="un-read">未读</view>
					</view>
				</view>
			</view>
		</view>
		<view class="loadmore-box" v-if="dataList.length > 0">
			<u-loadmore :status="status" @loadmore="load"></u-loadmore>
		</view>
		<u-back-top :scrollTop="scrollTop"></u-back-top>
		<user-auth></user-auth>
		<view style="height: 140rpx;width: 1rpx;"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			status: 'loadmore',
			isEnd: false,
			current: 1,
			pageSize: 10,
			scrollTop: 0,
			dataList: []
		};
	},
	onLoad() {
		this.init();
	},
	onReachBottom() {
		this.load();
		console.log('到底');
	},
	methods: {
		init() {
			this.query();
		},
		reload() {
			this.query();
		},
		load() {
			this.loadmore();
		},
		onScrollTop(e) {
			this.scrollTop = e.scrollTop;
		},
		async loadmore() {
			this.status = 'loading';
			if(this.isEnd){
				this.status = 'nomore';
				return;
			}
			var res = await this.getDataList();
			this.dataList = this.dataList.concat(res.data.records);
		},
		query() {
			this.current = 1;
			this.isEnd = false;
			this.status = 'loadmore';
			this.loadquery();
			this.$emit('fresh');
		},
		async loadquery() {
			var res = await this.getDataList();
			this.dataList = res.rows;
			for(var i=0;i<this.dataList.length;i++){
				var data = this.dataList[i];
				data.timestamp = new Date(data.updateTime).getTime();
			}
		},
		async getDataList() {
			var res = await this.$u.get('/wq/friendApply/myApply', {
				pageNum: this.current,
				pageSize: this.pageSize,
			});
			var totalPage = Math.ceil(res.total/this.pageSize);
			this.pages = totalPage;
			this.current ++;
			this.status = 'loadmore';
			if(this.current > this.pages){
				this.status = 'nomore';
				this.isEnd = true;
			}
			return res;
		},
		chat(e) {
			this.$u.route({
				url: 'packgeMine/pages/index/room',
				params: {
					applyId: e.id,
				}
			});
		},
		reply() {
			this.$u.route({
				url: 'packgeMine/pages/index/reply',
			});
		},
		dianzan() {
			this.$u.route({
				url: 'packgeMine/pages/index/dianzan',
			});
		},
		fans() {
			this.$u.route({
				url: 'packgeMine/pages/index/fans',
			});
		},
		fangke() {
			this.$u.route({
				url: 'packgeMine/pages/index/fangke',
			});
		},
	}
}; 
</script>
<style lang="scss" scoped>
	.msg-item {
		display: flex;
		align-items: center;
		padding: 15px;
		padding-bottom: 0;
	}
	.msg-right {
		flex: 1;
		padding-left: 10px;
	}
	.user-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 5px;
	}
	.redname {
		font-size: 28rpx;
		color: red;
	}
	.nickname {
		font-size: 28rpx;
	}
	.time {
		font-size: 28rpx;
		color: #b5b5b5;
	}
	.text {
		font-size: 24rpx;
		color: #8a5151;
	}
	.msg-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.read-status {
		font-size: 20rpx;
		color: #fff;
		background-color: #decdcd;
		padding: 3px 8px;
		border-radius: 20px;
	}
	.un-read {
		font-size: 20rpx;
		color: #fff;
		padding: 3px 8px;
		border-radius: 20px;
		background-color: #a2d0fd;
	}
	.loadmore-box {
		padding: 15px;
	}
</style>
